<template>
  <div class="mask">
    <div class="tankuang">
      <div class="l1">修改劳务人员</div>
      <el-form label-width="120px" :v-model="forms">
        <div class="ss">
          <el-form-item label="人员姓名" :rules="[{ required: true }]">
            <el-input
              class="s-1"
              placeholder="请输入人员姓名"
              v-model="formess.name"
            />
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input
              class="s-1"
              placeholder="请输入身份证号码"
              v-model="formess.idNumber"
            />
          </el-form-item>
        </div>
        <div class="ss">
          <el-form-item label="联系电话">
            <el-input
              class="s-1"
              placeholder="请输入联系电话"
              v-model="formess.phone"
            />
          </el-form-item>
          <el-form-item label="性别">
            <el-select placeholder="--请选择--" v-model="formess.sex">
              <el-option
                :key="item"
                :label="item"
                :value="item"
                v-for="item in list1"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="ss">
          <el-form-item label="工人类型">
            <el-select placeholder="--请选择--" v-model="formess.workerType">
              <el-option
                :key="item"
                :label="item"
                :value="item"
                v-for="item in list2"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="当前工种">
            <el-select placeholder="--请选择--" v-model="formess.worker">
              <el-option
                :key="item"
                :label="item"
                :value="item"
                v-for="item in list6"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="ss">
          <el-form-item label="所在项目">
            <el-select placeholder="--请选择--" v-model="formess.item">
              <el-option
                :key="item"
                :label="item"
                :value="item"
                v-for="item in list4"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所在承建商">
            <el-select placeholder="--请选择--" v-model="formess.contractor">
              <el-option
                :key="item"
                :label="item"
                :value="item"
                v-for="item in list5"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="ss">
          <el-form-item label="所在班组">
            <el-select placeholder="--请选择--" v-model="formess.teams">
              <el-option
                :key="item"
                :label="item"
                :value="item"
                v-for="item in list3"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="--请选择--" v-model="formess.state">
              <el-option
                :key="item"
                :label="item"
                :value="item"
                v-for="item in list7"
              />
            </el-select>
          </el-form-item>
        </div>
        <hr />
        <button @click="save1">保存</button>
        <button @click="xiaoshi5">取消</button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import "element-plus/dist/index.css";
const $router = useRouter();
const list1 = ["男", "女"];
const list6 = reactive(["砌筑工", "钢筋工", "架子工", "混凝土工"]);
const list2 = reactive(["管理人员", "建筑人员"]);
const list3 = reactive(["中建八局水泥一队", "_"]);
const list4 = reactive(["XXX项目1", "XXX项目2", "XXX项目3"]);
const list5 = reactive(["中建八局", "中建九局"]);
const list7 = reactive(["未进场", "在场", "已退场"]);
const props = defineProps<{
  id: string;
}>();
const emit = defineEmits<{
  (e: "ddd"): void;
  (e: "shuaxin"): void;
}>();
function xiaoshi5() {
  emit("ddd");
}
interface personList1 {
  id: string;
  name: string;
  idNumber: string;
  sex: string;
  phone: string;
  workerType: string;
  worker: string;
  item: string;
  contractor: string;
  teams: string;
  state: string;
}
const formess = reactive<personList1>({
  id: "",
  name: "",
  idNumber: "",
  sex: "",
  phone: "",
  workerType: "",
  worker: "",
  item: "",
  contractor: "",
  teams: "",
  state: "",
});
const getperson = () => {
  service({
    url: "flower",
    params: {
      id: props.id,
    },
  }).then((res) => {
    formess.name = res.data[0].name; //赋值
    formess.phone = res.data[0].phone;
    formess.item = res.data[0].item;
    formess.idNumber = res.data[0].idNumber;
    formess.sex = res.data[0].sex;
    formess.state = res.data[0].state;
    formess.teams = res.data[0].teams;
    formess.workerType = res.data[0].workerType;
    formess.worker = res.data[0].worker;
    formess.contractor = res.data[0].contractor;
  });
};
watch(
  props,
  () => {
    getperson();
    formess.id = "";
  },
  {
    deep: true,
  }
);
const save1 = () => {
  service({
    url: "flower/" + props.id, //携带id
    method: "patch",
    data: formess,
  }).then((res) => {
    emit("ddd");
    emit("shuaxin"); //刷新页面
  });
};
</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.tankuang {
  width: 800px;
  height: 400px;
  background-color: rgb(235, 238, 238);
  position: fixed;
  top: 200px;
  left: 450px;
  z-index: 100;
  overflow: auto;
}
.l1 {
  width: 100px;
  height: 40px;
  border-left: 3px solid green;
  margin-left: 30px;
  font-size: 16px;
  margin: 20px 30px;
  font-weight: bold;
}
.s-1 {
  width: 200px;
}
.ss {
  display: flex;
  justify-content: center;
}
.teshu {
  margin-left: 30px;
}

.zi {
  width: 320px;
  height: 30px;
  position: fixed;
  top: 520px;
  left: 750px;
}
button {
  width: 100px;
  height: 40px;
  background-color: rgb(127, 125, 125);
  border-radius: 10px;
  border: none;
  float: right;
  color: white;
  margin: 20px 10px 10px;
}
</style>